<template>
  <div class="movie-wrap">
      <header>猫眼电影</header>
      <nav>
        <div>
          <span>北京</span>
          <i class="yo-ico">&#xf033;</i>
        </div>
        <div></div>
        <div>
          <i class="yo-ico">&#xf067;</i>
        </div>
      </nav>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='stylus' scoped>
@import '~assets/stylus/border.styl'
.movie-wrap
    display flex
    flex-direction column
    header 
        height: .44rem
        background-color #e54847
        text-align center
        line-height .44rem
        font-size .18rem
        color #ffffff
        font-family Helvetica Neue,Helvetica,Arial,sans-serif
      nav
        height .44rem
        $border(0 0 1px 0)
        display flex
        >div:first-child
          width .8rem
          padding-left .16rem
          font-size .16rem
          line-height .44rem
          display flex
          align-items center
          color #666666
        >div:nth-child(2)
          flex 1
        >div:last-child
          width .8rem
          padding-right .16rem
          line-size .44rem
          font-size .18rem
          text-align right
          color #666666

  



</style>